<template>
<!-- 首页面 -->
  <div class="home">
    <!-- 准备二级路由坑 -->
    <router-view v-if="$route.path == '/home/searchpop'"></router-view>
   
   <div v-else>
      <!-- 搜索栏 -->
    <van-search @click="goSearch" shape="round" v-model="value" placeholder="请输入搜索关键词" />
    <!-- 轮播图 -->
    <Swiper :bannerArr ="bannerArr" ></Swiper>
    <!-- 图标导航 -->
    <Grid :channelArr="channelArr"></Grid>
    <!-- 品牌图片 新品 人气推荐 导航图 -->
    <ProductList :brandListArr='brandListArr' :topicListArr='topicListArr' :newGoodsListArr='newGoodsListArr' :hotGoodsListArr='hotGoodsListArr' :categoryListArr='categoryListArr'></ProductList>
   </div>

  </div>
</template>

<script>
import Swiper from '@/components/Swiper'
import Grid from '@/components/Grid'
import ProductList from '@/components/ProductList'
import { getIndex } from '@/utils/https.js'

export default {
data(){
    return{
        value:'',
        channelArr:[],
        bannerArr:[],
        brandListArr:[],
        newGoodsListArr:[],
        hotGoodsListArr:[],
        topicListArr:[],
        categoryListArr:[]
    }
},
created(){
  getIndex().then((res) =>{
    let {channel,banner,brandList,newGoodsList,hotGoodsList,topicList,categoryList} = res.data.data
    this.channelArr = channel;
    this.bannerArr = banner;
    this.brandListArr = brandList;
    this.newGoodsListArr = newGoodsList;
    this.hotGoodsListArr = hotGoodsList;
    this.topicListArr = topicList;
    this.categoryListArr = categoryList;
    // console.log(res.data.data);
    
  })
},
components:{
  Swiper,
  Grid,
  ProductList
},
methods:{
  goSearch(){
    this.$router.push("/home/searchpop")
    // console.log(this.$route.path);
  }
}
}
</script>

<style lang='less' scoped>

</style>